<template>
  <PageCard title="随机字符生成器">
    <n-spin :show="loading">
      <n-space vertical size="large">
        <n-checkbox-group v-model:value="checkedOptions">
          <n-space>
            <n-checkbox value="chooseNumber">数字[0-9]</n-checkbox>
            <n-checkbox value="chooseLowerLetter">小写字母[a-z]</n-checkbox>
            <n-checkbox value="chooseUpperLetter">大写字母[A-Z]</n-checkbox>
            <n-checkbox value="chooseSpecial">特殊符号[!@#$%^&*-=+]</n-checkbox>
          </n-space>
        </n-checkbox-group>

        <n-grid :cols="24" :x-gap="16">
          <n-grid-item :span="12">
            <n-form-item label="生成长度:">
              <n-input-number v-model:value="length" :min="1" :max="1024" placeholder="请输入字符长度" style="width: 100%"/>
            </n-form-item>
          </n-grid-item>
          <n-grid-item :span="12">
            <n-form-item label="固定前缀（可选）:">
              <n-input v-model:value="prefix" placeholder="例如：USER-、ORDER-" :maxlength="50"/>
            </n-form-item>
          </n-grid-item>
        </n-grid>

        <n-button @click="handleGenerate" type="primary" block size="large">
          开始生成
        </n-button>

        <div>
          <p class="mb-2">生成结果:</p>
          <n-input-group>
            <n-input
                v-model:value="result"
                type="textarea"
                placeholder="请点击上方按钮生成..."
                :rows="5"
                readonly
            />
            <n-button v-if="result" @click="handleCopy" type="primary">
              <template #icon>
                <n-icon :component="CopyIcon" />
              </template>
              复制
            </n-button>
          </n-input-group>
        </div>
      </n-space>
    </n-spin>
    <n-divider />
    <UsageGuide
      :title="usageGuideConfig.title"
      :steps="usageGuideConfig.steps"
      :tips="usageGuideConfig.tips"
      :example="usageGuideConfig.example"
    />
  </PageCard>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import {generateRandomCharacter, type RandomCharacterParams} from "@/api/random/RandomApi.ts";
import PageCard from "@/components/PageCard.vue";
import UsageGuide from "@/components/UsageGuide.vue";
import { useMessage, NIcon } from 'naive-ui';
import { CopyAllOutlined as CopyIcon } from '@vicons/material';

const message = useMessage();

const checkedOptions = ref(['chooseNumber', 'chooseLowerLetter', 'chooseUpperLetter', 'chooseSpecial']);
const result = ref('');
const length = ref(20);
const prefix = ref('');
const loading = ref(false);

// UsageGuide configuration
const usageGuideConfig = {
  title: '使用说明',
  steps: [
    '选择需要包含的字符类型（数字、大小写字母、特殊符号）',
    '设置要生成的随机字符串长度（1-1024个字符）',
    '可选设置固定前缀，生成的结果将以该前缀开头',
    '点击"开始生成"按钮获取随机字符串'
  ],
  tips: [
    '适用于生成密码、验证码、订单号、用户ID等场景',
    '建议密码生成时包含多种字符类型以提高安全性',
    '前缀功能可用于生成带有特定标识的ID'
  ],
  example: '生成密码：长度16，包含所有字符类型；生成订单号：前缀ORDER-，长度10，仅数字'
};

const handleGenerate = () => {
  loading.value = true;
  const param: RandomCharacterParams = {
    length: length.value,
    chooseNumber: checkedOptions.value.includes('chooseNumber') ? 1 : 0,
    chooseLowerLetter: checkedOptions.value.includes('chooseLowerLetter') ? 1 : 0,
    chooseUpperLetter: checkedOptions.value.includes('chooseUpperLetter') ? 1 : 0,
    chooseSpecial: checkedOptions.value.includes('chooseSpecial') ? 1 : 0,
    ...(prefix.value ? { prefix: prefix.value } : {})
  };

  generateRandomCharacter(param).then(res => {
    result.value = res.data;
    message.success('生成成功');
  }).catch(err => {
    console.error("生成失败:", err);
    message.error("生成失败，请稍后再试。");
  }).finally(() => {
    loading.value = false;
  });
};

// 复制结果
const handleCopy = async () => {
  if (!result.value) return;
  try {
    await navigator.clipboard.writeText(result.value);
    message.success('结果已成功复制到剪贴板！');
  } catch (err) {
    message.error('复制失败，请手动复制');
  }
};
</script>

